<div class="cil__base-block">
  <img class="cil__top-image" src="assets/images/centaur/change.svg" />
  <form class="cil__base-block--form" [formGroup]="validateForm" nz-form>
    <ng-template #aams>
      <app-aams-select
        level="institution"
        formControlName="insCode"
        [insCode]="validateForm.get('insCode')"
      ></app-aams-select>
    </ng-template>
    <div nz-row [nzGutter]="24">
      <ng-container *ngFor="let item of formItems">
        <div nz-col [nzSpan]="12" style="min-height: 0;">
          <!-- 自定义模板 -->
          <nz-form-item *ngIf="item.type === formItemType.TEMPLATE">
            <nz-form-label>{{ item.label }}</nz-form-label>
            <nz-form-control>
              <app-aams-select
                level="institution"
                formControlName="insCode"
                [insCode]="validateForm.get('insCode')"
                [disabled]="isAcquirerUser"
              ></app-aams-select>
              <nz-form-explain
                *ngIf="validateForm.get(item.formControlName).dirty && validateForm.get(item.formControlName).errors"
              >
                <ng-container *ngIf="validateForm.get(item.formControlName).hasError('required')">{{
                  item.errTips['required']
                }}</ng-container>
              </nz-form-explain>
            </nz-form-control>
          </nz-form-item>
          <!-- 多选框 -->
          <nz-form-item *ngIf="item.type === formItemType.SELECT && !item.hide && !(item.asyncHidden | async)">
            <nz-form-label>{{ item.label }}</nz-form-label>
            <nz-form-control>
              <nz-select
                [nzDisabled]="item.disable"
                [compareWith]="item.compareFn"
                [nzMode]="item.multiple"
                [formControlName]="item.formControlName"
                [nzAllowClear]="item.allowClear"
                name="item.formControlName"
                (ngModelChange)="item.change && item.change($event)"
              >
                <nz-option *ngFor="let op of item.options" [nzLabel]="op.label" [nzValue]="op.value"></nz-option>
              </nz-select>
              <nz-form-explain
                *ngIf="validateForm.get(item.formControlName).dirty && validateForm.get(item.formControlName).errors"
              >
                <ng-container *ngIf="validateForm.get(item.formControlName).hasError('required')">{{
                  item.errTips['required']
                }}</ng-container>
              </nz-form-explain>
            </nz-form-control>
          </nz-form-item>
          <!-- switch 开关-->
          <nz-form-item *ngIf="item.type === formItemType.SWITCH && !item.hide && !(item.asyncHidden | async)">
            <nz-form-label>{{ item.label }}</nz-form-label>
            <nz-form-control>
              <nz-switch
                [nzDisabled]="item.disable"
                [formControlName]="item.formControlName"
                (ngModelChange)="item.change($event)"
              ></nz-switch>
            </nz-form-control>
          </nz-form-item>
          <!-- 文件上传 -->
          <nz-form-item *ngIf="item.type === formItemType.FILE && !item.hide && !(item.asyncHidden | async)">
            <nz-form-label>{{ item.label }}</nz-form-label>
            <nz-form-control nzHasFeedback="true">
              <app-new-upload-file
                [disable]="item.disable"
                [(content)]="validateForm.get(item.formControlName).value"
              ></app-new-upload-file>
              <nz-form-explain
                *ngIf="validateForm.get(item.formControlName).dirty && validateForm.get(item.formControlName).errors"
              >
                <ng-container>{{ item.errTip }}</ng-container>
              </nz-form-explain>
            </nz-form-control>
          </nz-form-item>
          <!-- input -->
          <nz-form-item *ngIf="!item.type && !item.hide && !(item.asyncHidden | async)">
            <nz-form-label>{{ item.label }}</nz-form-label>
            <nz-form-control nzHasFeedback="true">
              <input
                nz-input
                [attr.disabled]="item.disable"
                [type]="item.inputType"
                [formControlName]="item.formControlName"
                [name]="item.formControlName"
                (input)="item.change ? item.change($event) : null"
              />
              <nz-form-explain
                *ngIf="validateForm.get(item.formControlName).dirty && validateForm.get(item.formControlName).errors"
              >
                <ng-container *ngIf="validateForm.get(item.formControlName).hasError('required')">{{
                  item.errTips['required']
                }}</ng-container>
                <ng-container *ngIf="validateForm.get(item.formControlName).hasError('maxlength')">{{
                  item.errTips['maxlength']
                }}</ng-container>
                <ng-container *ngIf="validateForm.get(item.formControlName).hasError('pattern')"
                  >{{ item.errTips['pattern'] }}
                </ng-container>
              </nz-form-explain>
            </nz-form-control>
          </nz-form-item>
        </div>
      </ng-container>
    </div>
  </form>
</div>
